<script setup lang="ts">
const props = defineProps({
  width: {
    type: Number,
    default: 520,
  },
  okText: {
    type: String,
    default: '确定',
  },
  cancelText: {
    type: String,
    default: '取消',
  },
  title: {
    type: String,
    default: '',
  },
  visible: {
    type: Boolean,
    default: false,
  },
  closable: {
    type: Boolean,
    default: true,
  },
  maskClosable: {
    type: Boolean,
    default: true,
  },
  destroyOnClose: {
    type: Boolean,
    default: false,
  },
  footer: {
    type: Boolean,
    default: true,
  },
  centered: {
    type: Boolean,
    default: true,
  },
  afterClose: {
    type: Function,
    default: () => {},
  },
  bodyStyle: {
    type: Object,
    default: () => ({}),
  },
  wrapClassName: {
    type: String,
    default: '',
  },
})

// 定义v-modal
const visible = ref(props.visible)
watch(() => props.visible, (val) => {
  visible.value = val
})
</script>

<template>
  <a-modal
    :width="width" :after-close="afterClose" :cancel-text="cancelText"
    :ok-text="okText" :title="title" :visible="visible" :closable="closable"
    :mask-closable="maskClosable" :destroy-on-close="destroyOnClose"
    :footer="footer" :centered="centered" :body-style="bodyStyle"
    :wrap-class-name="wrapClassName"
  >
    <slot />
  </a-modal>
</template>

<style scoped>

</style>
